<template>
  <div class="search" :style="{height, background}">
    <div class="btn-back" :style="{lineHeight: height}" @click="back" v-if="goback">
      <i class="iconfont">&#xe671;</i>
    </div>
    <div class="container" :style="{height: inputHeight, borderRadius: radius}">
      <div class="left-wrap">
        
      </div>
      <div class="center-wrap">
        <i class="iconfont icon">&#xe692;</i>
        <input
          :value="value"
          :placeholder="placeholder"
          @input="handlerInput"
        />
        <i class="iconfont close" v-show="value" @click="reset">&#xe66f;</i>
      </div>
      <div class="right-wrap">
        
      </div>
    </div>
    <div class="cancel" @click="rightClick" v-if="rightText">{{rightText}}</div>
  </div>
</template>

<script>
export default {
  name: "Search",
  props: {
    value: String,
    placeholder: {
      type: String,
      default: "请输入搜索关键字",
    },
    height: {
      type: String,
      default: '55px'
    },
    inputHeight: {
      type: String,
      default: '35px'
    },
    background: {
      type: String,
      default: '#fff'
    },
    radius: {
      type: String,
      default: ''
    },
    rightText: {
      type: String,
      default: ''
    },
    goback: Boolean
  },
  data() {
    return {};
  },
  methods: {
    handlerInput(e) {
      this.$emit('input', e.target.value)
    },
    reset() {
      this.$emit("input", "");
    },
    rightClick() {
      this.$emit('rightClick')
    },
    back() {
      this.$router.back()
    }
  },
};
</script>

<style lang="scss" scoped>
.search {
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;

  .btn-back {
    height: 100%;
    padding-right: 10px;
    text-align: center;
  }

  .container {
    flex: 1;
    display: flex;
    justify-content: space-between;
    background: #f7f8fa;

    .center-wrap {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      .iconfont {
        text-align: center;
      }

      .icon {
        color: #323233;
        font-size: 13px;
        padding: 0 10px 0 12px;
      }

      input {
        flex: 1;
        height: 100%;
        line-height: 100%;
        outline: none;
        border: 0;
        background: transparent;
        color: #323233;
        font-size: 13px;

        &::placeholder {
          color: #c8c9cc;
        }
      }

      .close {
        width: 40px;
        color: #cdd0d5;
        font-size: 18px;
      }
    }

    .right-wrap {
    }
  }

  .cancel {
    padding: 0 0px 0 10px;
    color: #333;
    font-size: 14px;
  }
}
</style>
